<template>
  <div class="login">
    <div class="form">
      <h2 style="color: #ffffff">用户中台</h2>
      <h2 style="color: #ffffff; margin-bottom: 10px">欢迎登录</h2>
      <a-input
        class="input"
        v-model:value="formState.username"
        placeholder="请填写用户名或手机号"
      />
      <a-input-password class="input" v-model:value="formState.password" placeholder="请填写密码" />
      <a-button type="primary" :loading="loading" @click="submit">
        {{ loading ? '登录中' : '登录' }}
      </a-button>
    </div>
  </div>
  <MachineVerification v-model:visible="modal.open" @ok="onFinish"></MachineVerification>
</template>

<script lang="ts" setup>
import { type ComponentInternalInstance, getCurrentInstance, reactive, ref } from 'vue'
import { router } from '@/router'
import { useAuth } from '@/stores/auth'
import { dynamicRoutes, routes } from '@/router/dynamic-routes'
import { useRoute } from 'vue-router'
import { setupDirectives } from '@/directives'
import MachineVerification from '@/components/machine-verification/index.vue'
import { message } from 'ant-design-vue'
import { fetchLogin, getVerifyCode } from '@/api/login'
import { encryptByDES } from '@/utils/crypto'
const modal = reactive({
  open: false
})
const loading = ref(false)
interface FormState {
  username: string
  password: string
}
// admin admin123!@#
const formState = ref<FormState>({
  username: 'admin',
  password: 'admin123!@#'
})
const store = useAuth()
const route = useRoute()

const { appContext } = getCurrentInstance() as ComponentInternalInstance
const app = appContext.config.globalProperties.$appInstance

function submit() {
  if (formState.value.username && formState.value.password) {
    modal.open = true
  } else {
    message.error('请填写完整用户信息！')
  }
}

const onFinish = async (captchaVerification: string) => {
  loading.value = false
  const { data }: any = await getVerifyCode()
  const uuid = data?.uuid
  modal.open = false
  const res = await login(
    formState.value.username,
    formState.value.password,
    captchaVerification,
    uuid!
  )
  res && (await message.success('登录成功！', 1))
  store.$patch({
    userInfo: res
  })
  // 生成路由
  await dynamicRoutes()
  // 生成自定义指令
  await setupDirectives(app)

  if (res) {
    const redirect = route.query.redirect as string
    const path = redirect ? redirect : routes[0]?.path
    if (path) {
      await router.push({
        path
      })
    } else {
      await router.push({
        name: 'NotFound'
      })
    }
  }
}
const login = async (
  userName: string,
  password: string,
  captchaVerification: string,
  uuid: string
) => {
  const req = {
    userName,
    uuid,
    userPass: password,
    projId: import.meta.env.VITE_SYSTEM_ID,
    captchaVerification,
    timestamp: Date.now()
  }
  const res: any = await fetchLogin({ enStr: encryptByDES(JSON.stringify(req), uuid), uuid })
  if (res.code === 0) {
    return res.data
  } else {
    await message.error(res.message, 1)
    return
  }
}
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.1);
  background-image: url('@/assets/img/login-bg.png');
  background-size: 100% 100%;

  .form {
    width: 400px;
    padding: 32px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background: rgba(0, 0, 0, 0.6);
    // background: rgba(255, 255, 255, .2);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .input {
      height: 50px;
      margin-bottom: 32px;
    }

    .forgetPassword {
      width: 100%;
      text-align: right;

      span {
        cursor: pointer;
      }
    }
  }
}
</style>
